<template>
  <div class="page-wrapper d-flex flex-column align-items-center">
    <JoinApplicationPhaseStepper />
    <div class="agreement">
      <p class="agreement-title">
        小店登记协议
      </p>
      <div class="agreement-paragraph">
        尊敬的卖家您好：
        <br />
        根据2019年1月1日生效的《中华人民共和国电子商务法》（下称“电商法”）相关规定，符合下列情形的，不需要进行市场主体登记，请您根据店铺经营情况选择对应的免登记类型：
        <br />
        &#9633;个人销售自产农副产品；<br />
        &#9633;个人销售家庭手工业产品；<br />
        &#9633;个人利用自己的技能从事依法无须取得许可的便民劳务活动；<br />
        &#9633;个人进行零星小额交易活动；<br />
        &#9633;其它依照法律、行政法规不需要进行登记的情况；<br />
        另，依据《电商法》第12条之规定电子商务经营者从事经营活动，依法需要取得相关行政许可的，应当依法取得行政许可。例如，您的店铺经营食品或者出版物等商品的，则不属于主体免登记类型，
        还应及时办理营业执照以及食品经营许可证、出版物经营许可证等相关证件。<br />
        如您经营的店铺商品符合本条之规定，则需按照《电商法》相关规定尽快到您住所所在地的县、自治县、不设区的市、市辖区市场监督管理部门依法办理市场主体登记。
        如您有办理市场主体登记的计划，您可以去您住所所在地的县、自治县、不设区的市、市辖区市场监督管理部门依法办理市场主体登记，
        取得营业执照后，可登录kuiniu App上传，
        上传成功并通过审核后，您的店铺将升级为企业店铺。<br />
        请您仔细阅读上述内容并根据您店铺经营情况勾选对应的免登记类型，您知悉，魁牛平台将不定期的对平台内的店铺进行抽查，
        如发现您的店铺不符合本声明情况的，魁牛平台有权通知您按照《电商法》相关规定依法办理市场主体登记，
        如您未在规定期限内提交营业执照，魁牛平台有权对您的店铺采取包括但不限于商品下架、删除、关闭店铺等限制措施。<br />
        魁牛平台将紧密关注《电商法》实施细则，并与监管部门保持沟通，如出台实施细则，魁牛平台将及时通知您。
        请您不用担心，如有问题，可通过官方客服电话进行咨询
        022-88888888（工作时间：周一至周日，早九点至晚九点）。
      </div>
      <div class="align-self-start">
        <!-- <b-form-checkbox v-model="agreementAccepted">
          我已阅读并同意
        </b-form-checkbox> -->
        <a-checkbox @change="onAgreementAcceptChanged">
          我已阅读并同意
        </a-checkbox>
      </div>
    </div>
    <b-button
      variant="outline-secondary"
      :disabled="!agreementAccepted"
      pill
      @click="onProceedButtonPressed"
    >
      下一步
    </b-button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { ACCEPT_SHOP_APPLICATION_AGREEMENT } from '@/assets/constants/mutations';
import JoinApplicationPhaseStepper from '@/components/m/JoinApplicationPhaseStepper';

export default {
  components: {
    JoinApplicationPhaseStepper,
  },
  layout: 'staticBanner',
  head() {
    return {
      title: '签约小店登记协议',
    };
  },
  data() {
    return {
      agreementAccepted: false,
    };
  },
  computed: {
    ...mapState(['shopApplicationAgreementSource']),
  },
  methods: {
    onProceedButtonPressed() {
      this.acceptAgreement();
      if (this.shopApplicationAgreementSource === 'individual') {
        this.$router.push('/application/individual');
      } else if (this.shopApplicationAgreementSource === 'enterprise') {
        this.$router.push('/application/enterprise');
      } else {
        this.$router.push('/joinPlatform');
      }
    },
    onAgreementAcceptChanged(e) {
      this.agreementAccepted = e.target.checked;
    },
    ...mapMutations({
      acceptAgreement: ACCEPT_SHOP_APPLICATION_AGREEMENT,
    }),
  },
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  background-color: #f3f3f3;
  @include media-breakpoint-up(sm) {
    padding-top: $main-nav-bar-height;
  }
  height: 100%;
}
.btn {
  width: 316px;
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 48px;
  font-size: 14px;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  background: #fff;
  box-shadow: 0 1px 8px -2px rgba(0, 0, 0, 0.5);
  margin-top: 30px;
  margin-bottom: 20px;
}
.agreement {
  padding: 0px 20px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.agreement-title {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.29px;
  margin-bottom: 30px;
}
.agreement-paragraph {
  max-width: 600px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.27px;
  margin-bottom: 18px;
}
</style>
